<template>
  <div class="Overview overflowY">
    <chart height="40vh" width="100%" :lineData="lineData"/>
    <p class="title" >最近30天火化量统计</p>
    <div class="total">
      <el-row :gutter="12">
        <el-col :span="3" style="height: 100px;"></el-col>
        <el-col :span="7">
          <el-card shadow="hover">
            <h3 class="title">冷藏概况</h3>
            <div class="content">
              <dl class="w50">
                <dt>冷藏柜总数</dt>
                <dd>{{Datalist.equipmentCount.equipmentCount}}</dd>
              </dl>
              <dl class="w50">
                <dt>当前在藏数量</dt>
                <dd>{{Datalist.equipmentCount.inEquipmentCount}}</dd>
              </dl>
              <dl class="w50">
                <dt>当前空闲数</dt>
                <dd>{{Datalist.equipmentCount.emptyEquipmentCount}}</dd>
              </dl>
              <dl class="w50">
                <dt>停用冷柜数</dt>
                <dd>{{Datalist.equipmentCount.disableEquipmentCount}}</dd>
              </dl>
              <dl class="w100">
                <dt>温度超设定值冷柜</dt>
                <dd>{{Datalist.equipmentCount.overTemperatureEquipment}}</dd>
              </dl>
            </div>
          </el-card>
        </el-col>
        <el-col :span="3" style="height: 100px;"></el-col>
        <el-col :span="7">
          <el-card shadow="hover">
            <h3 class="title">礼厅概况</h3>
            <div class="content">
              <dl class="w50">
                <dt>礼厅总数</dt>
                <dd>{{Datalist.hallCount.hallCount}}</dd>
              </dl>
              <dl class="w50">
                <dt>预定总场次</dt>
                <dd>{{Datalist.hallCount.inHallCount}}</dd>
              </dl>
            </div>
            <div class="clearfix"></div>
            <h3 class="title">火化炉概况</h3>
            <div class="content">
              <dl class="w50" v-for="(item, index) in Datalist.furnaceCounts">
                <dt>{{item.furnaceType}}火化任务合计</dt>
                <dd>{{item.appointmentCount}}</dd>
              </dl>
            </div>
          </el-card>
        </el-col>

      </el-row>
    </div>
  </div>
</template>

<script>
  import Chart from '@/components/Charts/MixChart'
  import * as Type from '@/api/service'

  export default {
    name: "Overview",
    components:{ Chart },
    data(){
      return{
        lineData:{   //火化数据
          arrivedCount:[],
          arrivedDate:[]
        },
        Datalist:{
          "arrivedCounts": [],
          "equipmentCount": {
            "equipmentCount": 0,
            "inEquipmentCount": 0,
            "emptyEquipmentCount": 0,
            "disableEquipmentCount": 0,
            "overTemperatureEquipment": []
          },
          "hallCount": {
            "hallCount": 0,
            "inHallCount": 0
          },
          "furnaceCounts": []
        }
      }
    },
    mounted(){
      this.readData()
    },
    methods:{
      readData(){
        //查询接口
        Type['loadBusinessOverview']().then(response => {
          const { data }=response;
          if (!data) {
            this.$message('数据读取失败')
            return
          }
          if (data.arrivedCounts){
            this.Datalist.arrivedCounts = data.arrivedCounts
            if (this.Datalist.arrivedCounts.length>0){
              this.Datalist.arrivedCounts.forEach(item=>{
                this.lineData.arrivedCount.push(item.arrivedCount)
                this.lineData.arrivedDate.push(item.arrivedDate)
              })
            }
          }
          if (data.equipmentCount){
            this.Datalist.equipmentCount = data.equipmentCount
          }
          if (data.hallCount){
            this.Datalist.hallCount = data.hallCount
          }
          if (data.furnaceCounts){
            this.Datalist.furnaceCounts = data.furnaceCounts
          }
          //   //数据读取成功
        }).catch(error => {
          this.$message(error)
        })
      },
    }
  }
</script>
<style>
  .Overview .el-card__body {
    padding: 00px!important;
  }
</style>
<style scoped>
.Overview{
  text-align: center;
  line-height: 3em;
  font-size: 1.5em;
  color:#000;
  background-color: #fff;
  overflow-x:hidden;
}
.Overview .total{
  padding-top: 1em;
}
.Overview .total .title{
  line-height: 2em;
  background-color: #e9e9e9;
  text-align: left;
  padding:0 1em;
  font-size:18px;
  font-weight: 700;
}

.Overview .total .content{
  width: 100%;
  /*padding:1em;*/
  text-align: left;
}
.Overview .total .content dl{
  float: left;
  display: inline-block;
  border: 1px solid #e9e9e9;
  padding:0.5em;
  line-height: 1.5em;
  font-size:20px;
  border-bottom: none;
}
.Overview .total .content dl dt{
  font-size: 16px;
  font-weight: 500;
}
  .w50{
    width: 50%;
  }
  .w100{
    width: 100%;
  }
</style>
